<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<script src="js/d3.v4.min.js"></script>
		<script src="js/jquery-3.7.1.min.js"></script>
	</head>
	<body>
		 <div id="main" style="width: 600px;height:400px;"></div>
	</body>
	<script>
	// 数据读取
	// 使用jquery进行数据的读取
	//读取csv数据
	
	$.get('Data/fruit.csv').done(function (data) {
		console.log("使用jquery进行数据的获取...")
		console.log(data)
	})
	//读取json数据
	$.get('Data/visits.json').done(function (data) {
		console.log("使用jquery进行数据的获取...")
		console.log(data)
	})
	
	d3.csv("Data/fruit.csv",function(error,data){
		console.log("使用d3进行数据的获取.....")
		console.log(data)
	})
	//读取json数据
	d3.json("Data/visits.json",function(error,data){
		console.log("使用d3进行数据的获取.....")
		console.log(data)
	})
	 // 基于准备好的dom，初始化echarts实例
	        var myChart = echarts.init(document.getElementById('main'));
			// 使用d3读取json文件
			d3.json("Data/visits.json",function(error,data){
				console.log(data);
				var weekday=[];
				var visit=[];
				var order=[];
				for(i=0;i<data.length;i++){
					weekday.push(data[i].weekday);
					visit.push(data[i].访问人数);
					order.push(data[i].下单人数);
				};
				//ECharts的配置项和载入配置项
				var option = {
					// 设置图例进行显示
					legend:{
						 show:true,
					     left:'center',
						 },
						 // 提示框的显示
					tooltip:{
						show:true,},
						// x轴
						// x轴的坐标为json中提取的星期数据
					xAxis: {
						type: 'category',
						data: weekday,},
					yAxis: {
					type: 'value',},
					// 数据源 的绑定
					// 在series中绑定的data为在json中提取的数据结果
					series: [{
						name:'访问人数',
						data: visit,
						type: 'line'},
						{
						name:'下单人数',
						data: order,
						type: 'line'}]
						}
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
						
			 
			})
	 

	
	       
	    </script>
</html>
